<!DOCTYPE html>
<html style="height: 100%">
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/public.css"/>
		<style type="text/css">
			
			@media screen and (max-width:2000px) {
				#main{
					width:50vw;height:60vh;margin-left:2vw
				}
			}
			@media screen and (max-width:1680px) {
				#main{
					width:45vw;height:57vh;margin-left:2.3vw;
				}	
			}
			@media screen and (max-width:1600px) {
				div ul li p{
					font-size: 8px;
					margin-left:15vw;
				}
				div ul li p:last-child{
					margin-left:15vw;
					font-size: 18px;
				}
			}
			@media screen and (max-width:1440px) {
				#main{
					width:100vw;height:50vh;
					margin-left:-80px;
				}		
			}
			@media screen and (max-width:1400px) {
				#main{
					width:80vw;height:60vh;
					margin-left:-20px;
				}
				div ul li p{
					font-size: 8px;
					margin-left:15vw;
				}
				div ul li p:last-child{
					margin-left:15vw;
					font-size: 14px;
				}
			}	
			@media screen and (max-width:1366px) {
				div ul li{
					width:43vw;
				}
				div ul li p{
					font-size: 8px;
					margin-left:16vw;
				}
				div ul li p:last-child{
					margin-left:16vw;
					font-size: 10px;
				}		
			}
			@media screen and (max-width:1360px) {
				div ul li{
					width:44vw;
				}
				div ul li p{
					font-size: 8px;
					margin-left:16vw;
				}
				div ul li p:last-child{
					margin-left:16vw;
					font-size: 16px;
				}
				div .customer{
					font-size:10px;
				}
			}
			*{
				margin:0;padding:0;
				
				
			}
			div .customer{
				width:100vw;
				height:9.9vh;
				line-height: 9.9vh;
				color:#fff;
				font-size:12px;
				margin-left:8.5vw;
				font-family:'微软雅黑';
			}
			div ul{
				width:100vw;
				height:23vh;
				/* border:1px solid #ccc; */
				margin-top:10.5vh;
				display: flex;
			}
			div ul li{
				width:41vw;
				height:23vh;
				/* border:1px solid #ccc; */
				margin-left:4.3vw;
				background: url(../img/组5.png)no-repeat;
				background-size: 100% 100% ;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
			div ul li:first-child{
				background: url(../img/组4.png)no-repeat;
				background-size: 100% 100% ;
			}
			div ul li p{
				width:41vw;
				margin-left:16vw;
				font-size: 14px;
				color: #0763c6;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				font-family:'微软雅黑';
			}
			div ul li p:last-child{
				width:41vw;
				margin-left:16vw;
				color: #fff;
				font-size: 28px;
				 font-family: DIGI;
			}
			div #main{
				width:50vw;height:60vh;margin-left:2vw
			}
		</style>
	</head>
	<body>
		<div>
			<p class="customer">新老顾客统计</p>
			<!-- <p class="customer">clients</p> -->
			<ul>
				<li>
					<p>机构</p>
					<p class="orgnum"></p>
				</li>
				<li>
					<p>门店</p>
					<p class="shopnum"></p>
				</li>
			</ul>
			<div id="main"></div>
		</div>
		<script src="../js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
		<script type="text/javascript">
		// 饼状图插件的部分内容
		
	 	var chart = echarts.init(document.getElementById('main'));
		  var optionbar = {
				color:['#df6c33','#018dfe'],//饼状图每部分的颜色
				tooltip: {
					trigger: 'item',
					// formatter: "{a} <br/>{b}: {c} ({d}%)",
					formatter: "{d}%",
					// show:false,
				},
				series: [{
					// name: '客户',
					type: 'pie',
					radius: ['35%', '50%'],
					center: ['50%', '50%'],
					avoidLabelOverlap: true,
					
					label: {
						normal: {
							formatter: '{d}%' //自定义显示格式(b:name, c:value, d:百分比
						},
						emphasis: {
							show: true,
							textStyle: {
								fontSize: '10',
								// fontWeight: 'bold'
							}
						}
					},
					labelLine: {
						normal: {
							show: true
						}
					},
					// data: [20,96]
					data:[]
				}]
			};
			
			
			
	 $(function () {
		//初始化数据
		initData();
		setInterval(initData, 10000);
	});
	var dom = document.getElementById("main");
	var gb = {
		chart: echarts.init(dom)
	};
	function disposeAndRun() {
		if (gb.chart) {
			gb.chart.dispose();
		}
		gb.chart = null;
		run(true);
	}
	var run = function (df) {
		if (!gb.chart) {
			gb.chart = echarts.init(dom);
		}
		if (optionbar && typeof optionbar === 'object') {
			gb.chart.setOption(optionbar, true);
		}
	}
	function initData() {
	    $.ajax({
		   type : "get",
		   async : false, //同步执行
				url :"http://192.168.1.27:8080/MetisManage/dataAuth/findMemberOldAndNew",
				success: function (rrdata) {
					var data = rrdata.records[0];
					// console.log(data,'wwww')
					var seriesdata = [{
							'value': data.newMemPercent,
							'name':  data.newMemPercent + "人"
						},
						{
							'value': data.oldMemPercent,
							'name': data.oldMemPercent + "人"
						}
					];
					optionbar.series[0].data=seriesdata,
					disposeAndRun();
				}
		});
				
		$.ajax({
			url:'http://192.168.1.27:8080/MetisManage/dataAuth/findOrgAndShopNum',
			type:'get',
			success:function(res){
				var data=res.records[0]
				$('.orgnum').html(data.orgnum)
				$('.shopnum').html(data.shopnum)
			}
		})
	}	
		
		   chart.setOption(optionbar)
			//设置默认选中高亮部分
			chart.dispatchAction({
				type: 'highlight',
				seriesIndex: 0,
				dataIndex: 0
			});
			chart.on('mouseover', function(e) {
			//当检测到鼠标悬停事件，取消默认选中高亮
				chart.dispatchAction({
					type: 'downplay',
					seriesIndex: 1,
					dataIndex: 0
				});
			//高亮显示悬停的那块
				chart.dispatchAction({
					type: 'highlight',
					seriesIndex: 1,
					dataIndex: e.dataIndex
				});
			});
			//检测鼠标移出后显示之前默认高亮的那块
			chart.on('mouseout', function(e) {
				chart.dispatchAction({
					type: 'highlight',
					seriesIndex: 0,
					dataIndex: 0
			}); });
		   
		</script>
	</body>
</html>
